<template>
  <div class="JmForm">
    <h1><span> 查询门店</span></h1>
    <div class="form-box">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="查询区域">
          <!-- npm install element-china-area-data -S   使用这个命令安装   在引入-->
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
      </el-form>

      <a-table :columns="columns" :data-source="dataTable" v-if="result">
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>

    <div class="btnAreas">
      <el-button @click="backHandle">返回</el-button>
      <el-button @click="backHandle">提交</el-button>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        phone: "",
        address: "",
        other: "",
      },
      options: regionData,
      selectedOptions: [],
      // 表头
      columns: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "years",
          dataIndex: "age",
          key: "age",
          width: 80,
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address 1",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column Long Column",
          dataIndex: "address",
          key: "address 2",
          ellipsis: true,
        },
        {
          title: "Long Column Long Column",
          dataIndex: "address",
          key: "address 3",
          ellipsis: true,
        },
        {
          title: "Long Column",
          dataIndex: "address",
          key: "address 4",
          ellipsis: true,
        },
      ],
      //   数据
      dataTable: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 2 Lake Park, London No. 2 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "4",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "5",
          name: "Jim Green",
          age: 42,
          address: "London No. 2 Lake Park, London No. 2 Lake Park",
          tags: ["loser"],
        },
        {
          key: "6",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "7",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "8",
          name: "Jim Green",
          age: 42,
          address: "London No. 2 Lake Park, London No. 2 Lake Park",
          tags: ["loser"],
        },
        {
          key: "9",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "10",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "11",
          name: "Jim Green",
          age: 42,
          address: "London No. 2 Lake Park, London No. 2 Lake Park",
          tags: ["loser"],
        },
        {
          key: "12",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
        {
          key: "13",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park, New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "14",
          name: "Jim Green",
          age: 42,
          address: "London No. 2 Lake Park, London No. 2 Lake Park",
          tags: ["loser"],
        },
        {
          key: "15",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park, Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
      //   查询结果
      result: false,
    };
  },
  //方法集合
  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.result = true;
      console.log(loc, "选择的区域");
    },
    backHandle() {
      this.$router.back();
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.JmForm {
  height: 80vh;
  background-image: url("../assets/product-red/zsjm.jpg");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 30px;
  cursor: pointer;
  h1 {
    font-size: 36px;
    color: #a8845c;
    position: relative;
    margin-bottom: 10px;
    & > span {
      &:before {
        content: "";
        position: absolute;
        left: 44%;
        top: -10px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t1.png") no-repeat;
        background-size: cover;
      }
      &::after {
        content: "";
        position: absolute;
        left: 54%;
        bottom: -20px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t2.png") no-repeat;
        background-size: cover;
      }
    }
  }
  // 加盟申请表
  .form-box {
    margin: 0 auto;
    // border: 1px solid red;
    width: 55vw;
    height: 54vh;
    overflow: scroll;
    margin-top: 50px;
    ::v-deep.el-form-item__label {
      color: white !important;
    }
    ::v-deep.el-form-item__content {
      width: 50vw;
    }
    ::v-deep.el-input__inner {
      width: 50vw;
    }

    // 表格文字
    ::v-deep .ant-table-column-title {
      color: #a8845c !important;
    }
    ::v-deep.ant-table-tbody {
      a {
        color: #a8845c !important;
      }
    }
    ::v-deep.ant-table-row-cell-ellipsis {
      color: #a8845c;
    }
    ::v-deep.ant-table-row-cell-break-word {
      color: #a8845c;
    }
  }

  .btnAreas {
    margin-top: 50px;
  }
}
</style>
